<template>
	<view>
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- 我的页面主体内容 -->
		<view class="head_content">
			<!-- logo图标 -->
			<view class="logos">
				<image src="../../static/head_logo.png" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<!--用户信息  -->
			<view class="user">
				<text style="color: #FFFFFF;font-size: 30rpx;">{{ name.length<11 ?name:phone }}</text>
				<image src="../../static/xiugai.png" style="width: 36rpx;height: 36rpx;margin-left: 66rpx;transform: translateY(5rpx);" mode="" @tap="Goto('/pages/personal_center/materials?name='+ nickname+'&phone='+phone)"></image>
				<view>
					<text style="font-size: 24rpx;color: #FFFFFF;">{{phone}}</text>
				</view>
			</view>
			<!-- 图标 -->
			<view class="mine_shave">
				<image src="../../static/mine_shar.png" style="width: 100%; height: 100%;" mode=""></image>
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="xianshi">
			<view class="tubiao">
				<image src="../../static/xianshi.png" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="huodo">
				<text style="font-size:36rpx;font-family:PingFang SC;font-weight:bold;color:rgba(249,159,0,1);">限时活动中心！！</text>
			</view>
			<view class="tbs">
				<image src="../../static/jiantou.png" style="width: 100%;height: 100%;" mode=""></image>
			</view>
		</view>
		<!-- 银行卡 -->
		<view class="xianshi" style="margin-top: 2rpx;" @tap="yinhas">
			<view class="tubiao">
				<image src="../../static/yinhang.png" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="huodo">
				<text style="font-size:30rpx;font-family:PingFang SC;color:#565656;">我的银行卡</text>
			</view>
			<view class="tbs" >
				<image src="../../static/jiantou.png" style="width: 100%;height: 100%;margin-left: 135rpx;" mode=""></image>
			</view>
		</view>
		<!-- 卡卷 -->
		<view class="xianshi" style="margin-top: 2rpx;" @tap="kajs">
			<view class="tubiao">
				<image src="../../static2/kaj.png" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="huodo">
				<text style="font-size:30rpx;font-family:PingFang SC;color:#565656;">我的卡卷</text>
			</view>
			<view class="tbs" >
				<image src="../../static/jiantou.png" style="width: 100%;height: 100%;margin-left: 170rpx;" mode=""></image>
			</view>
		</view>
		<!-- 客服 -->
		<view class="xianshi" style="margin-top: 2rpx;" @tap="lxkf">
			<view class="tubiao">
				<image src="../../static2/kef.png" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="huodo">
				<text style="font-size:30rpx;font-family:PingFang SC;color:#565656;">联系客服</text>
			</view>
			<view class="tbs" >
				<image src="../../static/jiantou.png" style="width: 100%;height: 100%;margin-left: 170rpx;" mode=""></image>
			</view>
		</view>
		<!-- 修改密码 -->
		<view class="xianshi" style="margin-top: 2rpx;" @tap="moilrd">
			<view class="tubiao">
				<image src="../../static/shezhi.png" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="huodo">
				<text style="font-size:30rpx;font-family:PingFang SC;color:#565656;">修改密码</text>
			</view>
			<view class="tbs" >
				<image src="../../static/jiantou.png" style="width: 100%;height: 100%;margin-left: 170rpx;" mode=""></image>
			</view>
		</view>
		<!-- 认证 -->
		<view class="xianshi" style="margin-top: 2rpx;" @tap="is_u_state">
			<view class="tubiao">
				<image src="../../static/renzhen.png" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="huodo" style="transform: translateY(-4rpx);">
				<text style="font-size:30rpx;font-family:PingFang SC;color:#565656;">实名认证</text>
			</view>
			<view class="tbs" >
				<image v-show="u_state==1" src="../../static/yirz.png" style="width: 100rpx;height: 40rpx;transform: translateY(10rpx);display: inline-block;margin-left: 70rpx;" mode=""></image>
				<image v-show="u_state==2"  src="../../static/shiban.png" style="width: 100rpx;height: 40rpx;transform: translateY(30rpx);display: inline-block;" mode=""></image>
			</view>
		</view>
		<view class="xianshi" style="margin-top: 2rpx;" >
			<view class="tubiao">
				<image src="../../static/tuijian.png" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="huodo">
				<text style="font-size:30rpx;font-family:PingFang SC;color:#565656;">我的推荐人</text>
			</view>
			
			<view class="tbs" >
				<text style="margin-left: -5rpx; font-size:24rpx;font-weight:bold;color:rgba(153,153,153,1);">{{ u_pid }}</text>
			</view>
			
		</view>
		<!-- 关于 -->
		<view class="xianshi" style="margin-top: 2rpx;" @tap="about">
			<view class="tubiao">
				<image src="../../static/guanyu.png" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="huodo">
				<text style="font-size:30rpx;font-family:PingFang SC;color:#565656;">关于我们</text>
			</view>
			<view class="tbs" >
				<image src="../../static/jiantou.png" style="width: 100%;height: 100%;margin-left: 170rpx;" mode=""></image>
			</view>
		</view>
		
		
		<!-- 退出按钮 -->
		<view style="margin-top: 26rpx;margin-bottom: 38rpx;">
			<button type="primary" @tap="outlogin" class="grace-button" style="width:702rpx;height:80rpx;background:#1678FF;border-radius:10rpx;font-weight:bold;color:rgba(255,255,255,1);font-size:32rpx;">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: null,//昵称
				name:'',//用户姓名
				headpic: null,//头像
				u_state: "",//认证状态
				u_pid: '',//用户推荐人信息[没有事空，有是json对象]
				phone: "",//用户手机
				identity:'暂无信息',
				
			}
		},
		onShow() {
			var vm=this;
			vm.name='';
			vm.u_state='';
			vm.u_pid='';
			vm.phone='';
			this.req.post(
			this.lochost+'/index/index?method=user_index',
			{},
			{},
			function(res){
				console.log(res);
				var data=res.data;
				vm.nickname=data.nickname;
				vm.name=data.name;
				vm.headpic=data.headpic;
				vm.u_state=data.state;
				vm.u_pid=data.m_tel;
				vm.phone=data.signature;
				vm.identity=data.identity;
			}
			)
		},
		methods: {
			outlogin(){
				uni.clearStorageSync()
				this.Goto('/pages/login/login');
			},
			is_u_state(){
				if(this.u_state == 2){
					this.Goto('/pages/authentication/non_real_name');
				}else{
					this.Goto('/pages/authentication/real_name?identity='+this.identity+'&nickname='+this.nickname);
				}
			
			},
			// 卡卷
			kajs(){
				this.Goto('/pages/profit/Xinka')
			},
			// 银行卡
			yinhas(){
				if(this.u_state == 2){
					this.Goto('/pages/authentication/non_real_name');
				}else{
					this.Goto('/pages/card_bag/card_bag');
					}
			},
			// 联系客服
			lxkf(){
				this.Goto('/pages/Last_page/Custome_service');
			},
			// 修改密码
			moilrd(){
				this.Goto('/pages/Last_page/Change_password');
			},
			// 关于我们
			about(){
				this.Goto('/pages/personal_center/About_us')
			}
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #F8F8F8;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #F8F8F8;
		top: 0;
		z-index: 999;
	}
	
	.head_content{
		width: 100%;
		height: 240rpx;
		background-color: #1678FF;
	}
	.logos{
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		padding-top: 40rpx;
		margin-left: 24rpx;
		float: left;
	}
	.user{
		display: inline-block;
		padding-top: 62rpx;
		margin-left: 25rpx;
	}
	.mine_shave{
		display: inline-block;
		width: 98rpx;
		height: 110rpx;
		margin-left: 291rpx;
		transform: translateY(21rpx);
	}
	.xianshi{
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
	}
	.tubiao{
		display: inline-block;
		width: 48rpx;
		height: 48rpx;
		float: left;
		margin-left: 31rpx;
		margin-top: 26rpx;
	}
	.huodo{
		display: inline-block;
		margin-left: 29rpx;
		margin-top: 29rpx;
	}
	.tbs {
		display: inline-block;
		width: 20rpx;
		height: 20rpx;
		margin-left: 310rpx;
	}
</style>
